import './css/index.css';
let arrowLeft = document.querySelector('.arrow-left');
let arrowRight = document.querySelector('.arrow-right');
let dots = document.querySelectorAll('.dot-box > span');
let list = document.querySelectorAll('.img-box > ul > li');
let ul = document.querySelector('.img-box > ul');
let box = document.querySelector('.box');
let timer;

// 定义防抖时间间隔
const debounceInterval = 500; // 500毫秒（可根据需求调整）

// 定义一个变量来保存防抖状态
let isDebouncing = false;

function init() {
  //克隆第一张和最后一张（无缝切换）
  ul.append(list[0].cloneNode(true));
  ul.prepend(list[list.length - 1].cloneNode(true));
  // 位置移动到第二章
  ul.style.transform = 'translateX(-100%)';
  // todo 加载js的时候会出现过渡效果
  // 如何解决？ --- 先去移动，再恢复过渡效果（延时执行）
  setTimeout(() => {
    ul.style.transition = 'transform .5s';
  }, 100);
}
init();

// 需要控制的值，标记值（初始值）
let index = 1;
// 保存上一次操作的值（移出类名）
let lastIndex = 1;

arrowLeft.addEventListener('click', debounce(arrowLeftFn, debounceInterval));
arrowRight.addEventListener('click', debounce(arrowRightFn, debounceInterval));

// 防抖函数
function debounce(func, delay) {
  return function () {
    if (isDebouncing) {
      return;
    }
    isDebouncing = true;
    func.apply(this, arguments);
    setTimeout(() => {
      isDebouncing = false;
    }, delay);
  };
}

// 下一张函数
function arrowRightFn() {
  ul.style.transform = `translateX(-${++index * 100}%)`;
  // 判断index是否超出li集合的长度, 如果超出回到第二张 （等待过渡效果结束跳转）
  if (index > list.length) {
    index = 1;
    // 等待过渡效果结束（ontransitionend事件）
    ul.addEventListener(
      'transitionend',
      () => {
        console.log('动画结束');
        // 关闭过渡效果
        ul.style.transition = 'none';

        // 回到第二张的位置
        ul.style.transform = `translateX(-${index * 100}%)`;

        // 重置（更新元素的新样式）
        window.getComputedStyle(ul).transform;
        // 恢复动画
        ul.style.transition = 'transform .5s';

        // 更新小圆点激活状态
        changeActive();
      },
      // 只执行一次
      { once: true }
    );
  } else {
    // 更新小圆点激活状态
    changeActive();
  }
}

// 上一张函数
function arrowLeftFn() {
  ul.style.transform = `translateX(-${--index * 100}%)`;
  // 判断index是否超出li集合的长度, 如果超出回到第二张 （等待过渡效果结束跳转）
  if (index < 1) {
    index = list.length;
    // 等待过渡效果结束（ontransitionend事件）
    ul.addEventListener(
      'transitionend',
      () => {
        console.log('动画结束');
        // 关闭过渡效果
        ul.style.transition = 'none';

        // 回到第二张的位置
        ul.style.transform = `translateX(-${index * 100}%)`;

        // 重置（更新元素的新样式）
        window.getComputedStyle(ul).transform;
        // 恢复动画
        ul.style.transition = 'transform .5s';

        // 更新小圆点激活状态
        changeActive();
      },
      // 只执行一次
      { once: true }
    );
  } else {
    // 更新小圆点激活状态
    changeActive();
  }
}

// 小圆点的点击事件
dots.forEach((item, elIndex) => {
  item.addEventListener(
    'click',
    debounce(() => {
      // 更新index值为当前小圆点的索引 + 1
      index = elIndex + 1;
      changeActive();
    }, debounceInterval)
  );
});

// changeActive 函数，主要功能是修改激活类名
function changeActive() {
  // 设置ul位置以切换到对应的图片
  ul.style.transform = `translateX(-${index * 100}%)`;
  // 移除前一个小圆点的激活状态类名
  dots[lastIndex - 1].classList.remove('dot-active');
  // 添加当前小圆点的激活状态类名
  dots[index - 1].classList.add('dot-active');
  // 更新lastIndex的值
  lastIndex = index;
}

// 自动轮播
autoPlay();
function autoPlay() {
  // 停止上一个定时器任务
  clearInterval(timer);
  timer = setInterval(arrowRightFn, 3000);
}

box.addEventListener('mouseenter', () => {
  clearInterval(timer);
});

box.addEventListener('mouseleave', () => {
  autoPlay();
});

// visibilityChange
document.addEventListener('visibilitychange', () => {
  // document.hidden
  // if (document.hidden) {
  //   clearInterval(timer)
  // } else {
  //   autoPlay()
  // }

  // document.visibilityState
  if (document.visibilityState === 'visible') {
    autoPlay();
    // console.log(1);
  } else {
    clearInterval(timer);
    // console.log(2);
  }
});
